import { Button, Popconfirm, Space } from 'antd';

interface IProps {
  onEditHandler: (id: string) => void
  onOrderTimeHandler: (id: string) => void
  onCardHandler: (id: string) => void
  onDelHandler: (id: string) => void
}

export const getColumns = ({
  onEditHandler, onOrderTimeHandler, onCardHandler, onDelHandler,
}:IProps):any => [
  {
    title: '课程标题',
    dataIndex: 'name',
    ellipsis: true, // 数据特别长时变为...
    copyable: true, // 和ellipsis搭配使用，可以复制标题搜索
  },
  {
    title: '限制人数',
    dataIndex: 'limitNumber',
    width: 75,
    search: false, // 关闭检索
  },
  {
    title: '持续时长',
    dataIndex: 'duration',
    width: 75,
    search: false,
  },
  {
    title: '操作',
    align: 'center',
    valueType: 'option', // 会将其转变为操作栏
    dataIndex: 'id', // 这个dataIndex设置啥，render的第一个参数的text获取的就是啥
    // @ts-ignore
    render: (text, entity) => (
      // space可以进行间隔调整
      <Space>
        <Button type="link" key="edit" onClick={() => onEditHandler(entity.id)}>编辑</Button>
        <Button type="link" key="order" onClick={() => onOrderTimeHandler(entity.id)}>可约时间</Button>
        <Button type="link" key="card" onClick={() => onCardHandler(entity.id)}>关联消费卡</Button>
        <Popconfirm
          title="提醒"
          description={`确定要删除 ${entity.name} 吗？`}
          onConfirm={() => onDelHandler(entity.id)}
        >
          <Button type="link">删除</Button>
          ,
        </Popconfirm>
      </Space>
    ),
  },
];
